﻿@using System.Web.Optimization
@using VocaDb.Model.Domain.Security
@using VocaDb.Model.Domain.Songs
@using VocaDb.Web.Helpers;
@using Res = ViewRes.SongList.FeaturedStrings;
@inherits VocaDb.Web.Code.VocaDbPage

@{
    PageProperties.Title = ViewRes.SharedStrings.FeaturedSongLists;	
	var categories = Translate.SongListFeaturedCategoryNames.AllFields.Where(f => f.Id != SongListFeaturedCategory.Nothing).ToArray();
}

@section Toolbar {
	@if (Login.Manager.HasPermission(PermissionToken.EditFeaturedLists)) {
		@Html.ActionLink(ViewRes.User.DetailsStrings.CreateNewList, "Edit", null, new { id = "createLink" })
	}
	@if (Login.Manager.HasPermission(PermissionToken.EditProfile)) {
		@Html.ActionLink(Res.Import, "Import", null, new { id = "importLink" })
	}
}

<div id="tabs" class="js-cloak" data-bind="show">
	<ul>
		@foreach (var cat in categories) {
			<li><a href="@("#" + cat.Id + "Tab")" data-bind="click: function() { initCategory('@cat.Id'); }">@cat.Name</a></li>
		}
	</ul>	

	@foreach (var cat in categories) {
	<div id="@(cat.Id + "Tab")" style="padding:10px;" data-bind="with: categories['@cat.Id']">
		
		@{ Html.RenderPartial("Partials/_SongListsFilters"); }

		@SongHelpers.SongListsKnockout("items", groupByYear: true)

		<h3 visible="{{ hasMore }}"><a href="#" data-bind="click: loadMore">@ViewRes.SharedStrings.ShowMore</a></h3>

	</div>
	}

</div>

@section BodyScripts {
@Scripts.Render("~/bundles/SongList/Featured")
<script type="text/javascript">
	
	moment.locale('@Culture');
	ko.punches.enableAll();

	$(function () {

		$("#createLink").button({ icons: { primary: 'ui-icon-plusthick' } });
		$("#importLink").button({ icons: { primary: 'ui-icon-plusthick' } });
		$("#tabs").tabs();

		var urlMapper = new vdb.UrlMapper('@RootPath');
		var categories = @ToJS(categories.Select(c => c.Id.ToString()));
		var viewModel = new vdb.viewModels.songList.FeaturedSongListsViewModel(new vdb.repositories.SongListRepository(urlMapper), categories);
		ko.applyBindings(viewModel);

	});

</script>
}

@section Head {
	<link rel="canonical" href="@UrlMapper.FullAbsolute(Url.Action("Featured"))" />
}